<template>
  <!-- 更换手机号 -->
  <view class="header">
    <u-navbar :border-bottom="false" title="更换手机号	" title-size="32" title-width="500"></u-navbar>
    <view class="borders flex flex-ac-c flex-jc-sb plr-10 mt-40">
      <view class="font-32 color-333">
        手机号
      </view>
      <view class="mobiwidth">
        <input type="number" placeholder="请输入您的手机号" v-model="moibles" maxlength="11" />
      </view>
      <view class="mb_15">
        <i-icon icon="iconshanchu" type="single" size="34rpx" color="#999999" @click.native="closmoilebtn()"></i-icon>
      </view>
    </view>
    <view class="borders flex flex-ai-c flex-jc-sb plr-10 mt-70">
      <view class="font-32 color-333">
        验证码
      </view>
      <view class="mobiwidth2">
        <input type="number" placeholder="请输入验证码" v-model="verificationCode" maxlength="6" />
      </view>
      <view class="getCaptcha mb_15" @click="getcaptachabtn()">
        获取验证码
      </view>
    </view>
    <view class="nextstep" @click="nextstepbtn()">
      下一步
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        moibles: '',
        verificationCode: '',
      }
    },
    methods: {
      goPage(url) {
        uni.navigateTo({
          url: url
        })
      },
      //清除手机号
      closmoilebtn() {
        this.moibles = ''
      },
      getcaptachabtn() {
        if (this.moibles.length < 11) {
          uni.showToast({
            title: '请输入合理手机号',
            duration: 3000,
            icon: 'none'
          })
          return
        } else {
          this.SendChangeMobileVerificationCode()
        }
      },
      //下一步
      nextstepbtn() {
        if (this.verificationCode.length < 6) {
          uni.showToast({
            title: '请输入合理验证码',
            duration: 3000,
            icon: 'none'
          })
          return
        } else {
          this.ChangeMyMobile()
        }
      },
      //发送验证码
      async SendChangeMobileVerificationCode() {
        try {
          const res = await this.$api.system.SendChangeMobileVerificationCode({
            mobile: this.moibles
          })
          if (res.code === 200) {
            uni.showToast({
              title: '已发送验证码',
              duration: 3000,
              icon: 'none'
            })
          }
        } catch (err) {}
      },
      //修改手机号接口
      async ChangeMyMobile() {
        try {
          const res = await this.$api.system.ChangeMyMobile({
            mobile: this.moibles,
            verificationCode: this.verificationCode
          })
          // 执行成功退出重新登陆
          if (res.code === 200) {
            // 登录信息-清除vuex
            this.$store.commit('setModel', null)
            //token存储-清除缓存
            uni.setStorageSync('token', '')
            //用户信息-清除缓存
            uni.setStorageSync('Ztc_C_USER_INFO', '')
            uni.setStorage({
              key: 'launchFlag',
              data: false,
            })
            //清除身份认证
            uni.setStorage({
              key: 'idcards',
              data: false,
            })
            uni.navigateTo({
              url: '/pages_logins/login/login'
            })
          }
        } catch (err) {}
      },
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    background-color: rgb(255, 255, 255);
    height: 100vh;
    padding: 55rpx;

    .borders {
      border-bottom: 1px solid #EEEEEE;

      .mobiwidth {
        width: 420rpx;
      }

      .mobiwidth2 {
        width: 300rpx;
      }

      .getCaptcha {
        width: 170rpx;
        height: 60rpx;
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 30rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        text-align: center;
        line-height: 60rpx;
      }
    }

    .nextstep {
      height: 88rpx;
      background: linear-gradient(0deg, #FBD220, #FFE23E);
      border-radius: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      text-align: center;
      line-height: 88rpx;
      margin-top: 300rpx;
    }
  }
</style>
